<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 428px;
        }
        .banner-box {
            width: 428px;
            height: 428px;
            border: 1px solid black;
            overflow: hidden;
        }
        .banner-box img {
            width: 100%;
        }
        h1 {
            text-align: center;
            font-size: 20px;
        }
        .btns {
            margin-top: 20px;
            display: flex;
            justify-content: center;
        }
        .btns button {
            margin: 0 10px;
            padding: 5px 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="box">
        <h1>切换图片</h1>
        <div class="banner-box">
            <img src="./img/case14/01.png" alt="">
        </div>
        <div class="btns">
            <button>上一张</button>
            <button>下一张</button>
        </div>
    </div>
    <script>
        let arr = [
            "./img/case14/01.png",
            "./img/case14/02.png",
            "./img/case14/03.png",
            "./img/case14/04.webp",
            "./img/case14/05.webp",
        ]
        const imgBox = document.querySelector(".banner-box img")
        const btns = document.querySelectorAll(".btns button")
        let curImgIndex = 0;
        // 上一张
        btns[0].addEventListener("click", function(){
            console.log('上一张')
            if(curImgIndex == 0 ){
                curImgIndex = arr.length-1
            }else{
                curImgIndex --
            }
            imgBox.src = arr[curImgIndex]
        })
        // 下一张
        btns[1].addEventListener("click", function(){
            console.log('下一张')
            if(curImgIndex == arr.length -1){
                curImgIndex = 0
            }else {
                curImgIndex++
            }
            imgBox.src = arr[curImgIndex]
        })
    </script>
</body>
</html>